<template>
  <!--
     v-model实现表单元素双向数据绑定 
     文本框中的内容和message绑定，其中一个改变，另一个跟着改变

     .lazy 懒惰模式,取消实时更新，当回车或失去焦点时更新数据
     .trim 去除首尾空白符
-->
  <input type="text" v-model.trim="message" placeholder="edit..." />
  <h3>{{ message }}</h3>
  <!--  
        加载组件三步走
        1.引入组件：import 组件名 from 组件路径
        2.挂载组件：在components中声明自己取的组件名
        3.显示组件：在template中加入组件名标签
    -->
</template>

<script>
export default {
  // 设置组件名称
  name: "test2",
  //   components: {
  //     test2,
  //   },
  data() {
    return {
      message: "",
    };
  },
};
</script>

<style scoped>
/* 去除焦点边框 */
input {
  outline: none;
}


</style>
